<template>
  <div class="courses-section">
    <!-- 添加筛选区域 -->
    <div class="filter-section">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="课程时长">
          <el-select v-model="filterForm.duration" placeholder="选择时长" clearable>
            <el-option label="2小时" value="2小时" />
            <el-option label="4小时" value="4小时" />
            <el-option label="6小时" value="6小时" />
          </el-select>
        </el-form-item>
        <el-form-item label="学习人数">
          <el-select v-model="filterForm.students" placeholder="选择人数范围" clearable>
            <el-option label="500人以下" value="low" />
            <el-option label="500-1000人" value="medium" />
            <el-option label="1000人以上" value="high" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">筛选</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="20">
      <el-col :span="8" v-for="course in filteredCourses" :key="course.id">
        <el-card class="course-card" :body-style="{ padding: '0px' }">
          <img :src="course.cover" class="course-image">
          <div class="course-info">
            <h3>{{ course.title }}</h3>
            <p>{{ course.description }}</p>
            <div class="course-meta">
              <span><el-icon><Timer /></el-icon> {{ course.duration }}</span>
              <span><el-icon><UserFilled /></el-icon> {{ course.students }}人学习</span>
            </div>
            <el-button type="primary" @click="startCourse(course.id)">开始学习</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Timer, UserFilled } from '@element-plus/icons-vue'

const emit = defineEmits(['start-course'])

// 筛选表单数据
const filterForm = ref({
  duration: '',
  students: ''
})

// 课程数据
const courses = ref([
  {
    id: 1,
    title: 'AI基础入门',
    description: '了解人工智能的基本概念和应用场景',
    cover: 'https://placeholder.com/300x200',
    duration: '2小时',
    students: 1234
  },
  {
    id: 2,
    title: '机器学习实战',
    description: '从零开始学习机器学习算法',
    cover: 'https://placeholder.com/300x200',
    duration: '4小时',
    students: 856
  },
  {
    id: 3,
    title: '深度学习进阶',
    description: '深入学习神经网络和深度学习框架',
    cover: 'https://placeholder.com/300x200',
    duration: '6小时',
    students: 567
  }
])

// 根据筛选条件过滤课程
const filteredCourses = computed(() => {
  return courses.value.filter(course => {
    let matchDuration = true
    let matchStudents = true

    if (filterForm.value.duration) {
      matchDuration = course.duration === filterForm.value.duration
    }

    if (filterForm.value.students) {
      const studentCount = course.students
      switch (filterForm.value.students) {
        case 'low':
          matchStudents = studentCount < 500
          break
        case 'medium':
          matchStudents = studentCount >= 500 && studentCount <= 1000
          break
        case 'high':
          matchStudents = studentCount > 1000
          break
      }
    }

    return matchDuration && matchStudents
  })
})

// 处理筛选
const handleFilter = () => {
  // 筛选逻辑已通过计算属性实现
}

// 重置筛选
const resetFilter = () => {
  filterForm.value.duration = ''
  filterForm.value.students = ''
}

const startCourse = (courseId) => {
  emit('start-course', courseId)
}
</script>

<style scoped>
.course-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.course-info {
  padding: 14px;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #666;
}

.filter-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
</style> 